<template>
    <div>
        {{dalist}}
        <div id="main" style="width:400px;height:500px"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
    export default {
        data() {
            return {
                dalist:[]
            }
        },
        methods: {
             //websocket链接
            openWebsocket(){
                let socket = new WebSocket("ws://localhost:8000/message/")
                //链接
                
            },
            //获取数据
            getDalist(){
                axios.get('http://localhost:5000/message/jechars/').then(res=>{
                    this.dalist = res.data.list
                    this.getEchars()
                })
            },
            //展示echars
            getEchars(){
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data:this.dalist,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
                };

                option && myChart.setOption(option);
            },
        
        },
        mounted() {
            this.getDalist()
            this.openWebsocket()
        },
    }
</script>

<style scoped>

</style>